<template>
  <!-- 物流单 -->
  <div class="logistics_bill">
    <!-- 顶部导航 -->
    <div class="logistics_bill_top">
      <van-nav-bar title="快递单" left-arrow @click-left="$router.go(-1)" />
      <!-- 搜索 -->
      <van-search
        v-model="searchValue"
        action-text="搜索"
        shape="round"
        show-action
        placeholder="关键字查询"
      />
    </div>

    <!-- 物流单列表 -->
    <div class="logistics_list" v-for="e in waybill" :key="e.id">
      <!-- 未提交 -->
      <van-cell
        v-if="e.star == 0"
        :title="'快递单号: ' + e.orderCode"
        is-link
        @click="
          $router.push({
            path: '/logisticListEvaluation',
            query: { info: JSON.stringify(e) },
          })
        "
      />
      <!-- 已提交 -->
      <van-cell
        v-if="e.star == 1"
        :title="'快递单号: ' + e.orderCode"
        is-link
        @click="
          $router.push({
            path: '/logisticListEvaluationExamine',
            query: { info: JSON.stringify(e.id) },
          })
        "
      />
      <van-card
        :desc="'收货人 ' + e.consignee"
        :title="'下单时间: ' + e.createTime"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <div>发货人 {{ e.consignor }}</div>
        </template>
        <template #footer>
          <!-- 未评价 -->
          <van-button
            v-if="e.star == 0"
            color="#ffcc33"
            round
            @click="
              $router.push({
                path: '/logisticListEvaluation',
                query: { info: JSON.stringify(e) },
              })
            "
          >
            评价
          </van-button>
          <!-- 已评价 -->
          <van-button
            v-else-if="e.star == 1"
            color="#ffcc33"
            round
            plain
            @click="
              $router.push({
                path: '/logisticListEvaluationExamine',
                query: { info: JSON.stringify(e.id) },
              })
            "
          >
            查看评价
          </van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { GetLogisticsSingleList } from "@/request/api";
export default {
  data() {
    return {
      searchValue: "",

      // 快递单内容
      waybill: [],
    };
  },
  created() {
    GetLogisticsSingleList({ keyword: "", current: 1, size: 10 }).then(
      (res) => {
        // console.log(res.data.records);
        this.waybill = res.data.records;
      }
    );
  },
};
</script>
 
<style lang = "less" scoped>
.logistics_bill {
  .logistics_bill_top {
    /* 顶部导航 */
    .van-hairline--bottom {
      background-color: #003399;
    }
    /deep/.van-nav-bar__title,
    /deep/.van-icon {
      color: #ffffff;
    }
    /* 搜索 */
    .van-search__action {
      color: #039;
    }
  }

  /* 物流单列表 */
  .logistics_list {
    .van-cell {
      margin-top: 0.1rem;
    }
    .van-card__header {
      border-bottom: 1px solid #ccc;
    }
    .van-card__footer {
      padding-top: 0.1rem;
    }
    .van-button {
      height: 0.3rem;
    }
    .van-card__content {
      line-height: 0.2rem;
    }
    .van-card {
      margin-top: 0;
      background-color: #fff;
    }
  }
}
</style>